<template>
  <div>
    <div class="top">
      <p class="one">注册</p>
      <router-link to="/dl"><van-icon name="arrow-left" /></router-link>
    </div>
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="tel" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" @blur="inputBlur()" />
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field v-model="demotext" type="text" name="验证码" label="验证码" placeholder="验证码"
        :rules="[{ required: true, message: '请填写密码' }]" @blur="yanzheng()" />
      <van-button type="danger" @click="funb()" :disabled="bool">{{ bentext }}</van-button>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { Notify } from 'vant';
// import service from "../../../utils/service";
// import service from "@"
import service from '@/utils/service';
export default {
  data() {
    return {
      bool: false,
      bentext: "点我发送验证码",

      username: '',
      password: '',
      demotext: ""
    };
  },
  methods: {
    onSubmit(values) {
      service({
        url: "http://118.178.238.19:3001/api/user/dofinishregister",
        method: "post",
        data: {
          tel: values.tel,
          password: values.password
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          Dialog.alert({
            title: '注册',
            message: '注册成功',
          }).then(() => {
            // on close
            this.$router.push("/dl")
          });
        }
      })
    },
    inputBlur() {
      service({
        url: "http://118.178.238.19:3001/api/user/docheckphone",
        method: "post",
        data: {
          tel: this.username
        }
      }).then(res => {
        if (res.data.code == 200) {
          Notify({ type: 'success', message: '您该账户可以使用' });

        } else {
          Notify({ type: 'danger', message: '用户名已被注册' });

        }
      })
    },
    funb() {
      let i = 60;
      this.bool = true

      service({
        url: "http://118.178.238.19:3001/api/user/dosendmsgcode",
        method: "post",
        data: {
          tel: this.username
        }
      }).then(res => {
        console.log(res);
      })

      let setint = setInterval(() => {
        this.bentext = "验证码已发" + i + "秒";
        i--;
        if (i == 0) {
          this.bentext = "点我发送验证码";
          clearInterval(setint)
          this.bool = false
        }
      }, 1000)

    },
    yanzheng() {
      service({
        url: "http://118.178.238.19:3001/api/user/docheckcode",
        method: "post",
        data: {
          tel: this.username,
          telcode: this.demotext
        }
      }).then(res => {
        console.log(res);
      })
    }
  },
};
</script>

<style scoped>
h1 {
  text-align: center;
  color: pink;
}

.van-button--danger {
  margin-left: 220px;
  font-size: 14px;
  border-radius: 20px;
  height: 30px;
}

.one {
  text-align: center;
  color: #666;
  font-size: 20px;
  margin-top: 5px;

}

.two {
  font-size: 12px;
  margin-left: 300px;
}

.van-button--round {
  background-color: tomato;
  border: 0;
}
</style>